<template>
  <div class="V-carousel">
    <div
      class="carousel"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
      <slot></slot>
    </div>
    <div class="indicator" v-if="showIndicator">
      <div
        class="indicator_item"
        v-for="(item, index) of slideLen"
        :key="index"
        :class="{ active: index === curIdx - 1 }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Carousel',
  props: {
    showIndicator: { // 是否显示小圆点
      type: Boolean,
      default: true
    },
    speed: { // 两次滑动间隔的时间
      type: Number,
      default: 3000
    },
    duration: { // 过渡时间，默认500ms
      type: Number,
      default: 500
    },
    autoplay: { // 是否自动轮播
      type: Boolean,
      default: true
    },
    moveRatio: { // 默认手指移动时的距离超图片宽度0.25倍时切换图片
      type: Number,
      default: 0.25
    }
  },
  data () {
    return {
      slideLen: 1, // 元素长度
      curIdx: 1, // 当前的index
      swiperStyle: {}, // swiper样式
      totalWidth: 0, // swiper的宽度
      scrolling: false // 是否正在滚动
    }
  },
  mounted () {
    setTimeout(() => {
      this.handleDom()
      this.autoplay && this.run()
    }, 50)
  },
  methods: {
    /**
     * 操作DOM, 在DOM前后添加Slide
     */
    handleDom () {
      const carouselEl = document.querySelector('.carousel')
      const slideEls = carouselEl.getElementsByClassName('slide')

      this.slideLen = slideEls.length

      // 如果this.slideLen > 1，那么在前后分别添加一个slide
      if (this.slideLen > 1) {
        const cloneFirst = slideEls[0].cloneNode(true)
        const cloneLast = slideEls[this.slideLen - 1].cloneNode(true)

        carouselEl.insertBefore(cloneLast, slideEls[0])
        carouselEl.appendChild(cloneFirst)

        this.totalWidth = carouselEl.offsetWidth
        this.swiperStyle = carouselEl.style
      }

      // 让carouselEl, 显示第一个(目前是显示前面添加的最后一个元素)
      this.setTransform(-this.totalWidth)
    },
    /**
     * 设置滚动的位置
     */
    setTransform (position) {
      this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`
      this.swiperStyle['-webkit-transform'] = `translate3d(${position}px), 0, 0`
      this.swiperStyle['-ms-transform'] = `translate3d(${position}px), 0, 0`
    },
    /**
     * 自动轮播
     */
    run () {
      this.timer = setInterval(() => {
        this.curIdx++
        this.scrollContent(-this.curIdx * this.totalWidth)
      }, this.speed)
    },
    /**
     * 清除定时器
     */
    stopTimer () {
      clearInterval(this.timer)
    },
    /**
     * 滚动到正确的位置
     */
    scrollContent (currentPosition) {
      // 开始滚动动画
      this.swiperStyle.transition = `transform ${this.duration}ms`
      this.setTransform(currentPosition)

      // 判断滚动到的位置
      this.checkPosition()
    },
    checkPosition () {
      // 1.校验正确的位置
      if (this.curIdx >= this.slideLen + 1) {
        this.curIdx = 1
        this.swiperStyle.transition = '0ms'
        this.setTransform(-this.curIdx * this.totalWidth)
      } else if (this.curIdx <= 0) {
        this.curIdx = this.slideLen
        this.swiperStyle.transition = '0ms'
        this.setTransform(-this.curIdx * this.totalWidth)
      }

      // 2.结束移动后的回调
      this.$emit('transitionEnd', this.curIdx - 1)
    },
    /**
     * 获取手指触摸时初始坐标
     */
    touchStart (e) {
      // 如果正在滚动, 不可以拖动
      if (this.scrolling) return

      this.stopTimer()
      // 保存开始滚动的位置
      this.startX = e.targetTouches[0].pageX
    },
    /**
     * 计算手指滑动距离并移动
     */
    touchMove (e) {
      this.currentX = e.touches[0].pageX
      this.moveX = this.currentX - this.startX
      // 移动图片：图片原来的位置 + 指移动的距离
      const translateX = -this.curIdx * this.totalWidth + this.moveX

      this.setTransform(translateX)
    },
    /**
     * 手指离开时根据滑动距离判断是否更换图片
     */
    touchEnd () {
      // 1.获取移动的距离的绝对值
      const currentMove = Math.abs(this.moveX)

      // 2.判断最终的距离
      if (this.moveX === 0) {
        return
      } else if (this.moveX > 0 && currentMove > this.totalWidth * this.moveRatio) { // 左滑
        this.curIdx--
      } else if (this.moveX < 0 && currentMove > this.totalWidth * this.moveRatio) { // 右滑
        this.curIdx++
      }

      // 3.移动到正确的位置
      this.scrollContent(-this.curIdx * this.totalWidth)

      // 4.移动完成后重新开启定时器
      this.run()
    }
  }
}
</script>

<style lang="scss" scoped>
.V-carousel {
  position: relative;
  overflow: hidden;

  .carousel {
    display: flex;
  }

  .indicator {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 8px;

    &_item {
      box-sizing: border-box;
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background-color: #fff;
      line-height: 8px;
      text-align: center;
      font-size: 12px;
      margin: 0 5px;

      &.active {
        background-color: rgba(212, 62, 46, 1);
      }
    }
  }
}
</style>
